import React from 'react'
import { Button } from 'react-vant';
import { useSearchParams, useNavigate, Outlet } from 'react-router-dom';
import styles from './css/my/my.module.scss'
import { UserCircleO, Edit, LocationO, Records } from '@react-vant/icons';


export default function My() {
  const navigate = useNavigate()
  let [params] = useSearchParams()
  const id = params.get('id')
  return (
    <div className="container" style={{ padding: '30px 0' }}>
      <div className={styles.header}>
        <div className={styles["user"]}>
          <UserCircleO fontSize="120" color="#5f504e" />
          <div className={styles["info"]}>
            <h1>昵称：{false ? '' : '未填写'}</h1>
            <div>电话：<span className={styles["tel"]}>153 xxxx 551</span></div>
            <div>邮箱：<span className={styles["email"]}>zqh_153@163.com</span></div>
          </div>
        </div>
        <div className={styles["operation"]}>
          <div className={styles["item"]} onClick={() => navigate('/my', { replace: true })}>
            <Edit fontSize="60" color="#5f504e" />
            <span>编辑个人资料</span>
          </div>
          <div className={styles["item"]} onClick={() => navigate('/my/address', { replace: true })}>
            <LocationO fontSize="60" color="#5f504e" />
            <span>地址管理</span>
          </div>
          <div className={styles["item"]} onClick={() => navigate('/my/order', { replace: true })}>
            <Records fontSize="60" color="#5f504e" />
            <span>订单管理</span>
          </div>
        </div>
      </div>

      <section className={styles.section}>
        <Outlet />
      </section>
    </div>
  )
}
